window.addEventListener('load',function(){   // 为了让页面全部加载完再执行js
    // 1.获取元素
    var left_1 =  document.querySelector('.left1');
    var right_1 =  document.querySelector('.right1');
    var banner = document.querySelector('.banner');
    var bannerWidth = banner.offsetWidth;
    // 2. 鼠标经过banner 就显示隐藏左右按钮
    banner.addEventListener('mouseenter',function(){
        left_1.style.display = 'block';
        right_1.style.display = 'block';
        clearInterval(timer);
        timer = null;//清除定时器变量
    })
    // 3.鼠标离开banner 就隐藏左右按钮
    banner.addEventListener('mouseleave',function(){
        left_1.style.display = 'none';
        right_1.style.display = 'none';
        timer = setInterval(function(){
            //手动调用点击事件
            right_1.click();
        },2000)
    })
    // 4. 动态生成小圆圈  有几张图片，我就生成几个小圆圈
    var ul  = banner.querySelector('ul');
    var ol = banner.querySelector('ol')
    // console.log(ul.children.length); 为了获取到ul里面子元素的个数
    for(var i=0 ; i<ul.children.length;i++) { 
        // 创建一个li
        var li = document.createElement("li");
        //记录当前的索引号 通过自定义属性来做
        li.setAttribute('index',i)
        // 把li插入到ol里面
        ol.appendChild(li);
        //5.小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click',function(){
            //干掉所有人   把所有li 清除current 类名
            for(var i = 0 ; i<ol.children.length;i++){
                ol.children[i].className = '';
            }
            //留下我自己   当前的li 设置current  类名
            this.className = "current"
            //6.点击小圆圈，移动图片  当然移动的是ul
            //ul 的移动距离就是 小圆圈的索引号 乘以 图片的宽度 注意是负值
            //当我们点击了某个小li，就拿到当前li的索引号
            var index = this.getAttribute('index')
            //当我们点击了某个li 就要吧这li 的索引号给num
            num = index;
             //当我们点击了某个li 就要吧这li 的索引号给circle
            circle = index;
            animate(ul,-index * bannerWidth)
        })
    }
    //把ol里面的第一个li设置类名为 current
    ol.children[0].className = 'current';
    //7.克隆第一张图片（li）放到ul 最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first)
    //8.点击右侧按钮，图片滚动一张
    var num = 0;
    var circle = 0;
    right_1.addEventListener('click',function(){
        //如果走到最复制的一张图片，此时 我们的ul 要快速复原left 改为 0 
        if(num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul,-num * bannerWidth);
        //9.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放量
        circle++;
        //如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
        if(circle == ol.children.length) {
            circle = 0 ;
        }
        circleChange();
    })
    // 10.左侧按钮做法
    left_1.addEventListener('click',function(){
        //如果走到第一张图片，此时 我们的ul 要快速复原到最后一张图片
        if(num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num *  bannerWidth + "px";
            
        }
        num--;
        animate(ul,-num * bannerWidth);
        //8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放量
        circle--;
        //如果circle <0 说明第一张图片  则小圆圈要改为第4个小圆圈
        if(circle < 0) {
            circle = ol.children.length-1 ;
        }
       circleChange();
    });
    function circleChange(){
         //先清除其余小圆圈的current类名
         for(var i = 0;i<ol.children.length;i++){       
            ol.children[i].className = '';
        }
        //留下当前的小圆圈的current类名
        ol.children[circle].className = 'current';
    }
    //11. 自动播放轮播图
    var timer = setInterval(function(){
        //手动调用点击事件
        right_1.click();
    },2000)
})